<template>
    <div class="el-tree-node" @click.stop="handleClick" @contextmenu="($event) => this.handleContextMenu($event)" v-show="source.visible" :class="{
      'is-expanded': expanded,
      'is-current': source.isCurrent,
      'is-hidden': !source.visible,
      'is-focusable': !source.disabled,
      'is-checked': !source.disabled && source.checked,
      parent_tag: source.data.isGroup,
      child_tags: !source.data.isGroup,
    }" role="treeitem" tabindex="-1" :aria-expanded="expanded" :aria-disabled="source.disabled" :aria-checked="source.checked" ref="node">
        <div class="el-tree-node__content">
            <span aria-hidden="true" :style="{ width: (source.level - 1) * (tree.indent + 1) + 12 * (source.level - 2) + 'px' }"></span>
            <div class="nodeContent" :class="{ selectedColor: currentSelect === source.data.key }" :style="{'margin-left': Number(source.data.isGroup) * 12 * (source.level - 1) + 'px'}">
                <span v-if="source.data.isGroup" @click.stop="handleExpandIconClick" :class="[
            {
              'is-leaf': !source.data.isGroup,
              expanded: source.data.isGroup && expanded,
            },
            'el-tree-node__expand-icon',
            'iconfont',
            tree.iconClass ? tree.iconClass : 'icongw-icon-biaoti-xiala',
          ]"></span>

                <el-checkbox v-if="showCheckbox" v-model="source.checked" :indeterminate="source.indeterminate" :disabled="!!source.disabled" @click.stop @change="handleCheckChange" class="myTreeCheckBox">
                </el-checkbox>
                <i v-if="showStatus" class="iconfont dot" :class="getClass(source.data.status)"></i>

                <span v-if="source.loading" class="el-tree-node__loading-icon el-icon-loading"></span>
                <node-content :node="source"></node-content>
                <div class="operates" v-if='source.data.isGroup&&showOperate'>
                    <el-popover placement="bottom" trigger="hover">
                        <el-button-group class="new-button-group setModule">
                            <el-button type="primary text" class="elBtn" size="small" @click="newEquip(source)">
                                {{$t('equipInfo.poverTips.newDevice')}}
                            </el-button>
                            <el-button type="primary text" class="elBtn" size="small" @click="templateNewEquip(source)">
                                {{$t('equipInfo.poverTips.templateNew')}}
                            </el-button>
                        </el-button-group>
                        <i class="iconfont icon16_tianjia" @click.stop slot="reference"></i>
                    </el-popover>
                    <i class="iconfont icontianjiafenzu" @click.stop="groupEditAndNew(true, source)" v-if="source.data.isFirst"></i>
                    <el-popover placement="bottom" trigger="hover" v-if="!source.data.isFirst">
                        <el-button-group class="new-button-group setModule">
                            <el-button type="text" size="small" class="elBtn" @click.stop="groupEditAndNew(false, source)">
                                {{$t('equipInfo.poverTips.rename')}}
                            </el-button>
                            <el-button type="text" size="small" class="elBtn" @click="groupEditAndNew(true, source)">
                                {{$t('equipInfo.poverTips.newChildGroup')}}</el-button>
                            <el-button type="danger" size="small" @click.stop="deleteGroup(source)">
                                {{$t('publics.button.deletes')}}</el-button>
                        </el-button-group>
                        <i class="el-icon-more" @click.stop slot="reference"></i>
                    </el-popover>
                </div>
                <span class="equipNumber" v-if="source.data.isGroup && showCount">
                    ({{ source.data.count }})
                </span>
            </div>
        </div>
    </div>
</template>

<script type="text/jsx">
import ElCheckbox from 'element-ui/packages/checkbox';
import emitter from 'element-ui/src/mixins/emitter';
import mixinNode from './mixin/node';

export default {
    name: 'ElTreeVirtualNode',
    componentName: 'ElTreeVirtualNode',

    mixins: [emitter, mixinNode],

    props: {
        source: {
            default () {
                return {};
            }
        },
        renderContent: Function,
        showCheckbox: {
            type: Boolean,
            default: false
        },
        showCount: {
            type: Boolean,
            default: false
        },
        showStatus: {
            type: Boolean,
            default: false
        },
        showOperate: {
            type: Boolean,
            default: false
        },
        currentSelect: {
            type: Number,
            default: -1
        }
    },

    components: {
        ElCheckbox,
        NodeContent: {
            props: {
                node: {
                    required: true
                }
            },
            render (h) {
                const parent = this.$parent;
                const tree = parent.tree;
                const node = this.node;
                const { data, store } = node;
                return (
                    parent.renderContent
                        ? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
                        : tree.$scopedSlots.default
                            ? tree.$scopedSlots.default({ node, data })
                            : <span class="el-tree-node__label">{node.label}</span>
                );
            }
        }
    },
    computed: {
        getClass () {
            return function (state) {
                let className;
                switch (state) {
                    case 0:
                        className = 'NoCommunication';
                        break;
                    case 1:
                        className = 'CommunicationOK';
                        break;
                    case 2:
                        className = 'HaveAlarm';
                        break;
                    case 3:
                        className = 'HaveSetParm';
                        break;
                    case 4:
                        className = 'initial';
                        break;
                    case 5:
                        className = 'CheFang';
                        break;
                    case 6:
                        className = 'BackUp';
                        break;
                    default:
                        className = 'CommunicationOK';
                        break;
                }
                return className;
            };
        }
    },
    data () {
        return {
            tree: null,
            expanded: false,
            childNodeRendered: false,
            oldChecked: null,
            oldIndeterminate: null
        };
    },

    watch: {
        'source.indeterminate' (val) {
            this.handleSelectChange(this.source.checked, val);
        },

        'source.checked' (val) {
            this.handleSelectChange(val, this.source.indeterminate);
        },

        'source.expanded' (val) {
            this.$nextTick(() => { this.expanded = val });
            if (val) {
                this.childNodeRendered = true;
            }
        }
    },

    created () {
        const parent = this.$parent.$parent.$parent;
        this.creator(parent, 'source');
    }
};
</script>